<template>
	<div class="box">
		<!-- 头部搜索模块 -->
		<headerSearch 
      :selectObj="selectObject" 
      :goSearchFc="searchClick" 
      :buttonList="buttonList"
    />
		<!-- 中间表格模块 -->
        <BaseTable
            :data="dryingStoreCost"
            :columns="dryingStoreCostColumns"
            :tableHeight="0.7*tableHeight"
            :pagination="false"
            :loading="loading"
            @details="(i)=>tableClick(i,'top')"
        ></BaseTable>

		<div class="page">
			<el-pagination
				background
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="queryAll.startpage"
				:page-sizes="[10, 15, 20, 25, 30]"
				:page-size="queryAll.pagesize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="totalNum"
			></el-pagination>
		</div>


		<!-- 审核 -->
		<el-drawer
			:before-close="handleClose"
			title="结算"
			:visible.sync="drawerSettlement"
			direction="rtl"
			size="50%"
		>
      <settlement 
        ref="settlement" :customerData="customerData" :isGet="isGet" :clickRow="clickRow"
      />
			<div class="demo-drawer__footer" v-if="!isGet">
				<el-button type="primary" @click="submitInner()" size="mini">结 算</el-button>
        <el-button size="mini" @click="drawerSettlement = false">取消</el-button>
			</div>
		</el-drawer>

    <div>
      <div style="color: #606266;font-size: 14px;margin: 5px 10px;">结算明细</div>
      <BaseTable
        :data="settlementDetailData"
        :columns="settlementDetailDataColumns"
        :tableHeight="0.3*tableHeight"
        :pagination="false"
        :loading="loadingB"
        @details="(i)=>tableClick(i,'bottom')"
      ></BaseTable>
    </div>
      
	</div>
</template>

<script>
import Utils from '@/libs/Utils.js'
import BaseTable from '@/components/BaseTable'
import api from '@/api/billingSettlementSys/dryingCost/dryingStoreCost/index'
import publicapi from '@/api/public'
import headerSearch from '@/components/headerSearch'
import settlement from './settlement.vue'
export default {
  name: 'dryingStoreCost',
  components: {
    BaseTable,
    headerSearch,
    settlement
  },
  data() {
    return {
      // 搜索框显示对象
      selectObject: [
        {
          name: '船代',
          type: 'select',
          modelName: 'customerId',
          selectData: [],
          selectLabel: 'customerName',
          selectValue: 'customerId'
        }
      ],
      // header的按钮list
      buttonList: [
        { label: '结算', type: 'primary', icon: 'el-icon-shopping-bag-1', disabled: true, click: () => this.settlement, permission: 'costManagement:dryingCost:dryingStoreCost:settlement' },
        { label: '撤销结算', type: 'primary', icon: 'el-icon-refresh-left', disabled: true, click: () => this.revoke, permission: 'costManagement:dryingCost:dryingStoreCost:revokeS' },
        { label: '审核', type: 'primary', icon: 'el-icon-user', disabled: true, click: () => this.examine, permission: 'costManagement:dryingCost:dryingStoreCost:examine' },
        { label: '撤销审核', type: 'primary', icon: 'el-icon-refresh-left', disabled: true, click: () => this.revokeExamine, permission: 'costManagement:dryingCost:dryingStoreCost:revokeE' }
      ],
      dryingStoreCostColumns: [ // table表头
        { prop: 'orderNo', label: '订单编号', isShort: true },
        { prop: 'companyName', label: '组织', isShort: true, width: 70 },
        { prop: 'customerName', label: '客户名称', isShort: true, width: 150 },
        { prop: 'treeSpeciesName', label: '树种' },
        { prop: 'quantity', label: '计划件数' },
        { prop: 'packages', label: '计划包数' },
        { prop: 'volume', label: '计划方数' },
        { prop: 'confirmVolume', label: '确认方数' },
        { prop: 'settlementVolume', label: '结算方数' },
        { prop: 'statusName', label: '状态' }
      ],
      dryingStoreCost: [],
      activeName: 'first',
      loading: false,
      loadingB: false,
      queryAll: {
        startpage: 1,
        pagesize: 10
      },
      totalNum: 0,
      drawerSettlement: false,
      settlementDetail: false, // 结算明细div
      settlementDetailData: [],
      settlementDetailDataColumns: [
        { prop: 'dryTypeName', label: '烘干类型' },
        { prop: 'volume', label: '方数' },
        { prop: 'chargeCompanyName', label: '收款人', isShort: true },
        { prop: 'payCompanyName', label: '付款人', isShort: true },
        { prop: 'totalAmount', label: '金额', isMoney: true },
        { prop: 'createName', label: '确认人', width: 150 },
        { prop: 'orderTime', label: '确认时间' },
        { prop: 'costNmae', label: '结算人', width: 150 },
        { prop: 'costTime', label: '结算时间', width: 150 },
        { prop: 'settlementStatusName', label: '结算状态', width: 150,
          render(h, params) {
            if (params.row.settlementStatusName === '未结算') {
              return h('el-tag', {
                props: {
                  size: 'mini'
                },
                domProps: {
                  innerHTML: '未结算'
                }
              })
            } else if (params.row.settlementStatusName === '已结算') {
              return h('el-tag', {
                props: {
                  size: 'mini',
                  type: 'info'
                },
                domProps: {
                  innerHTML: '已结算'
                }
              })
            } else if (params.row.settlementStatusName === '已审核') {
              return h('el-tag', {
                props: {
                  size: 'mini',
                  type: 'success'
                },
                domProps: {
                  innerHTML: '已审核'
                }
              })
            }
          }
        },
        {
          label: '结算详情',
          fixed: 'right',
          align: 'center',
          width: 80,
          render: (h, params) => {
            return h(
              'div',

              [
                h('el-button', {
                  props: {
                    size: 'mini'
                  },

                  domProps: {
                    // 添加标签,使用自己引入的iconfont图标
                    innerHTML:
											"<span style='color:#0B6CD6'><i class='iconfont icon-1-07'></i><span  style='padding-left:5px;'>查看</span></span>"
                  },
                  on: {
                    click: () => {
                      this.settlement(params.row, true)
                    }
                  }
                })
              ]
            )
          }
        }
      ],
      clickRow: {},
      clickRowB: {}, // 点击明细
      isGet: false, // 是否是查询功能下
      customerData: [] // 货主货代开证公司
    }
  },
  computed: {
    tableHeight: function() {
      return this.$store.state.tableHeight - 60
    }
  },
  created() {
    this.getCustomer()
  },
  methods: {
    /**
     * 获取烘干计费
     */
    async getDryingCostList() {
      this.loading = true
      this.settlementDetailData = []
      await api
        .reqGetDryingCost(this.queryAll)
        .then(res => {
          this.loading = false
          this.buttonList[0].disabled = true
          this.buttonList[1].disabled = true
          this.buttonList[2].disabled = true
          this.buttonList[3].disabled = true
          this.dryingStoreCost = res.data.data.pages
          this.queryAll.startpage = res.data.data.pageNum
          this.queryAll.pagesize = res.data.data.pageSize
          this.totalNum = res.data.data.totalNum
        })
        .catch(() => {})
    },

    /**
     * 打开结算抽屉
     */
    async settlement(row, isGet) {
      this.drawerSettlement = true
      const clickRow = JSON.parse(JSON.stringify(isGet ? row : this.clickRowB || this.clickRowB))
      this.isGet = isGet

      this.$nextTick(() => { // 获取结算信息赋值
        // 置空
        this.$refs.settlement.tableData = []
        this.$refs.settlement.totalAmount = 0
        api.reqGetSettlementById(clickRow.id).then(res => {
          this.$refs.settlement.formData.chargingData = res.data.data.costList
          this.$refs.settlement.formData.sureData = res.data.data.dryWorkItemList
          this.$refs.settlement.totalAmount = res.data.data.totalAmount
        })
      })
    },
    /**
     * 结算
     */
    async submitInner() {
      const res = await api.reqSaveList({ id: this.clickRowB.id })
      if (res.data.code === '0000') {
        this.$message.success('结算成功')
        this.drawerSettlement = false
        this.getDryingCostList()
      }
      console.log(res, 'resss');
    },

    /**
     * 审核
     */
    async examine() {
      const res = await api.reqExamineList(this.clickRowB.costId)
      if (res.data.code === '0000') {
        this.$message.success('审核成功')
        this.getDryingCostList()
      }
    },
    /**
     * 撤销结算
     */
    async revoke() {
      const res = await api.reqRevokeList(this.clickRowB.costId)
      if (res.data.code === '0000') {
        this.$message.success('撤销成功')
        this.getDryingCostList()
      }
    },
    /**
     * 撤销审核
     */
    async revokeExamine() {
      const res = await api.reqRevokeExamine(this.clickRowB.costId)
      if (res.data.code === '0000') {
        this.$message.success('撤销成功')
        this.getDryingCostList()
      }
    },
    /**
     * 获取计费详情
     */
    openDetail(row) {
      this.settlementDetail = true
      this.loadingB = true
      this.$nextTick(() => { // 获取结算信息赋值
        // 置空
        this.settlementDetailData = []
        api.reqGetSettlement({ id: row.id }).then(res => {
          this.loadingB = false
          this.settlementDetailData = res.data.data
        })
      })
    },
    /**
     * 获取行信息
     */
    tableClick(row, type) {
      if (type === 'top') {
        this.clickRow = row
        this.openDetail(row)
        this.buttonList.forEach(item => {
          item.disabled = true
        })
      } else {
        this.clickRowB = row
        this.buttonList.forEach(item => {
          item.disabled = true
        })
        if (row.settlementStatus === 0) {
          this.buttonList[0].disabled = false
        } else if (row.settlementStatus === 1) {
          this.buttonList[1].disabled = false
          this.buttonList[2].disabled = false
        } else if (row.settlementStatus === 2) {
          this.buttonList[3].disabled = false
        }
      }
    },
    /**
     * 获取船代货代
     */
    async getCustomer() {
      const res = await publicapi.getlistCustomer()
      this.customerData = res.data.data
      this.selectObject[0].selectData = res.data.data
    },
    handleSizeChange(val) {
      this.queryAll.pagesize = val
      this.getDryingCostList()
    },
    handleCurrentChange(val) {
      this.queryAll.startpage = val
      this.getDryingCostList()
    },
    searchClick(searchData) {
      this.queryAll.startpage = 1
      this.queryAll = Object.assign(this.queryAll, searchData)
      this.getDryingCostList()
    },

    handleClose(done) {
      const oldV = {}
      const newV = {}
      if (!Utils.compareData(oldV, newV)) {
        this.$confirm('修改的数据未保存，是否关闭？')
          .then(_ => {
            done()
          })
          .catch(_ => {})
      } else {
        done()
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import "~@/assets/form.less";
.selectBox {
	justify-content: space-between;
	display: flex;
	background: #ffffff;
	border: 1px solid #e1e4eb;
	border-bottom: 0;
	border-left: none;
	height: 50px;
	position: relative;
	align-items: center;
	padding-left: 14px;
	padding-right: 20px;
}
.input_box {
	display: flex;
}
.page {
	background: #ffffff;
	text-align: right;
	border-radius: 0 0 4px 4px;
	padding: 5px 20px;
}
/deep/.el-tabs--border-card > .el-tabs__content {
	padding: 0 !important;
}
//抽屉底部样式
/deep/ .el-drawer__header {
	margin-bottom: 0;
	padding: 16px;
	border-bottom: 1px solid gainsboro;
}
.demo-drawer__footer {
	text-align: right;
	padding-right: 20px;
	border-top: 1px solid #c8cfde;
	background-color: #f5f7fa;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	line-height: 50px;
}
.box {
	background: #ffffff;
	border: 1px solid #e1e4eb;
	border-radius: 4px 4px 0 0;
	border-top: none;
}
</style>
